<template>
  <div>
    <template v-if="!wholeField">
      <mb-select v-if="isMobile" v-model="value" @input="handle_broadcast" :options="options" :simple="simple" />
      <el-select class="select-middle" v-if="!isMobile" v-model="value"
      :popper-append-to-body="false" @change="handle_broadcast">
        <template v-if="!simple">
          <el-option v-for="(item, idx) in options"
          :key='idx' :value="item.value||item" :label="item.label||item" />
        </template>
        <template v-if="simple">
          <el-option v-for="(item, idx) in options"
          :key='idx' :value="idx" :label="item.label||item" />
        </template>
      </el-select>
    </template>
    <div class="vertical-align-flex" v-if="wholeField">
      <div class="field">{{item.label || item}}：</div>
      <div class="value">
        <mb-select v-if="isMobile" v-model="value" @input="handle_broadcast"
        :options="options" :simple="simple" />
        <el-select class="select-middle" v-model="value" :popper-append-to-body="false"
        v-if="!isMobile" @change="handle_broadcast">
          <template v-if="!simple">
            <el-option v-for="(item, idx) in options"
            :key='idx' :value="item.value||item" :label="item.label||item" />
          </template>
          <template v-if="simple">
            <el-option v-for="(item, idx) in options"
            :key='idx' :value="idx" :label="item" />
          </template>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from "vuex"
  export default {
    data(){
      return {
        // 绑定选项的值
        selected_value: '',
      }
    },
    computed: {
      ...mapState({
        isMobile: state => state.user.isMobile
      })
    },
    props:{
      options: {},
      // v-model
      value: {},
      // options 选项是否为简单数组 （非对象数组）
      simple: {
        default: false,
      },
      // 是否为整个字段
      wholeField: {
        type: Boolean,
        default: false,
      },
      // 显示label
      item: {},
    },
    methods: {
      handle_broadcast(){
        console.log(this.value)
        this.$emit('input', this.value)
      },
    },
    activated() {

    }
  }
</script>

<style lang="scss" scoped>

</style>
